import React, { Component } from 'react'
import {
  NavBar,
  Icon,
  InputItem,
  WingBlank,
  WhiteSpace,
  Button,
  Modal,
  Toast
} from 'antd-mobile'
import './index.css'
import msg from './msg.png'
import { registeUser } from '../../api/register/verify_phone'
export default class VerifyCode extends Component {
  state = {
    password: '',
    isOpen: false
  }
  handleChange = (e) => {
    this.setState({
      password: e
    })
  }
  handleIsOpen = () => {
    this.setState({isOpen : !this.state.isOpen})
  }
  handleClick = async () => {
    const result = await registeUser(this.props.phone, this.state.password)
    console.log(result);
    if (result.data.success) {
      Toast.success('Load success !!!', 1);
      this.props.history.push('/Login')
    } else {
      Toast.fail('注册失败，请检查网络', 1)
    }

  }
  render() {
    // console.log(this.state.password);
    return (
      <div className='wrap'>
        <NavBar
          mode='light'
          icon={<Icon type='left' color='#000' />}
          onLeftClick={() => console.log(111)}
        >
          硅谷注册
        </NavBar>
        <WhiteSpace size='lg'></WhiteSpace>

        <WingBlank size='lg'>
          <div className='img'>
            <img src={msg} alt='' />
          </div>
          <WhiteSpace size='lg'></WhiteSpace>
          <WingBlank size='lg'>
            <div className='tip'>请设置登录密码</div>
          </WingBlank>
          <WhiteSpace size='lg'></WhiteSpace>

          <div className='code'>
            <InputItem
              className='psw'
              type={this.state.isOpen?'text':'password'}
              clear
              placeholder='请设置8~20位登录密码'
              extra={<span className={this.state.isOpen ? 'iconfont icon-yanjing' : 'iconfont icon-close-eye'} onClick={this.handleIsOpen}></span>}
              value={this.state.password}
              onChange={this.handleChange}
            ></InputItem>
          </div>
          <WingBlank size='lg'>
            <div>
              密码由8-20位字母、数字或半角符号组成，不能是10位以下纯数字/字母/半角符号，字母需区分大小写
            </div>
          </WingBlank>
          <WingBlank size='lg'>
            <Button className='code-next' type='warning' disabled={!/^\w{8,20}$/.test(this.state.password)} onClick={this.handleClick}>
              完成
            </Button>
          </WingBlank>
          <WingBlank size='lg'>
            遇到问题了?
            <a href=''>请联系客服</a>
          </WingBlank>
        </WingBlank>
      </div>
    )
  }
}
